<template>
  <div>
    <a-row>
      <a-col :span="20">
        <a-select
          :style="{ width: '100%' }"
          placeholder="选择销售订单"
          v-model="curValue"
          :open="false"
          :disabled="disabled"
        >
          <a-icon slot="suffixIcon" type="0" />
          <a-select-option v-for="item in datalist" :key="item.cSOCode" :value="item.cSOCode">{{
              item.cSOCode
            }}</a-select-option>
        </a-select>
      </a-col>
      <a-col :span="4">
        <a-button type="primary" style=";width: 100%" @click="openfrom" :disabled="disabled">
          <a-icon type="search" /> </a-button
        ></a-col>
    </a-row>
    <a-modal
      title="选择销售订单"
      width="70%"
      :visible="visible"
      :confirmLoading="loading"
      okText="选择"
      @ok="handleChoose"
      @cancel="
        () => {
          this.visible = false
        }
      "
    >
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="10">
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input v-model="queryParam.cSOCode" placeholder="销售订单号" />
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item>
                <a-input v-model="queryParam.cCusName" placeholder="客户编号/名称" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button
                type="primary"
                @click="
                  () => {
                    this.pagination.current = 1
                    this.getDataList()
                  }
                "
              >查询</a-button
              >
              <a-button style="margin-left: 8px" @click="reset">重置</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table
        ref="table"
        :columns="columns"
        :rowKey="row => row.Id"
        :dataSource="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          columnWidth: '40px',
          type: 'radio'
        }"
        :bordered="true"
        size="small"
      >
        <template slot="TotalNum" slot-scope="text">
          <span>{{ text.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</span>
        </template>
        <template slot="TotalAmount" slot-scope="text">
          <span>{{ text.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</span>
        </template>
      </a-table>
    </a-modal>
    <div></div>
  </div>
</template>

<script>
export default {
  props: {
    value: { required: false },
    disabled: { type: Boolean, required: false, default: false }
  },
  data() {
    return {
      curValue: '',
      selectedRow: [],
      selectedRowKeys: [],
      data: [],
      queryParam: {},
      visible: false,
      loading: false,
      datalist: [],
      sorter: { field: 'Id', order: 'desc' },
      pagination: {
        current: 1,
        pageSize: 25,
        showTotal: (total, range) => `总数:${total} 当前:${range[0]}-${range[1]}`,
        pageSizeOptions: ['25', '50', '100'], //设置pageSize的可选值，页面啊可以通过下拉框进行选择
        showSizeChanger: true
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'Aid',
          customRender: (value, row, index) => {
            return index + 1
          },
          width: '50px'
        },

        { title: '销售订单号', dataIndex: 'cSOCode', width: '12%' },
        {
          title: '单据日期',
          dataIndex: 'dDate',
          align: 'center',
          customRender: (value, row) => {
            return row.dDate.substring(0, 10)
          },
          width: '10%'
        },
        { title: '客户编码', dataIndex: 'cCusCode', width: '10%' },
        { title: '客户名称', dataIndex: 'cCusName', width: '22%' },

        { title: '销售类型', dataIndex: 'cSTName', align: 'center', width: '10%' },

        { title: '总数量', dataIndex: 'TotalNum', align: 'center', width: '10%', scopedSlots: { customRender: 'TotalNum' } },
        { title: '总金额', dataIndex: 'TotalAmount', align: 'center', width: '10%', scopedSlots: { customRender: 'TotalAmount' } },
      ]
    }
  },

  components: {},
  methods: {
    onSelectChange(selectedRowKeys, selectedRow) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRow = selectedRow
    },
    openfrom() {
      this.selectedRowKeys = []
      this.selectedRow = []
      this.pagination.current = 1
      this.pagination.pageSize = 25
      this.queryParam = {}
      this.getDataList()
      this.visible = true
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination = { ...pagination }
      this.filters = { ...filters }
      this.sorter = { ...sorter }
      this.getDataList()
    },
    reset() {
      this.queryParam = {}
      this.pagination.current = 1
      this.getDataList()
    },
    getDataList() {
      this.loading = true
      this.$http
        .post('/OrderManagement/SO_SOMain/GetDataList', {
          PageIndex: this.pagination.current,
          PageRows: this.pagination.pageSize,
          SortField: 'dDate',
          SortType: 'desc',
          Search: this.queryParam
        })
        .then(resJson => {
          this.loading = false
          this.data = resJson.Data
          const pagination = { ...this.pagination }
          pagination.total = resJson.Total
          this.pagination = pagination
        })
    },
    handleChoose() {
      this.datalist = [...this.selectedRow]
      this.curValue = this.selectedRow[0].Code

      this.$emit('input', this.curValue)
      this.$emit('change', this.selectedRow[0])
      this.visible = false
    }
  },
  mounted() {},
  created() {},
  computed: {},
  watch: {
    value(value) {
      if (value) {
        this.$http
          .post('/OrderManagement/SO_SOMain/GetDataList', {
            PageIndex: 1,
            PageRows: 25,
            SortField: 'dDate',
            SortType: 'desc',
            Search: { Code: value }
          })
          .then(resJson => {
            this.datalist = resJson.Data
            this.curValue = value
          })
      } else {
        this.datalist = []
        this.curValue = ''
      }
    }
  }
}
</script>

<style scoped>

</style>